<template>
    <div>
         <div class="demo-sturc">
                <div class="sturc_title">
                      <div class="sturc_title_userinfo">
                            <div class="sturc_loog">
                                 <img src="../../assets/boe_title.png" alt="">
                            </div>
                            <div class="sturc_icon_title">GMQM质量管理中心</div>
                      </div>
                </div> 
                 <div class="sturc_hader">
                        <div class="sturc_item1" @click="onclick">
                            <div ><img src="../../assets/dataquery.png" alt="" class="sturc_item1_icon"></div>
                           <div>Data Query 数据查询</div>
                        </div>
                        <div class="sturc_item2" @click="onclick2">
                              <div><img src="../../assets/ren_time.png" alt="" class="sturc_item2_icon"></div>
                              <div>Real-time 看板</div>
                        </div>
                 </div>
         </div>
    </div>
</template>

<script>
    export default {
         data(){
             return{
                
             }
         },
         methods:{
             onclick(){
                 this.$router.push('/dataquery')
             },
             onclick2(){
                this.$router.push('/ran_time')
             }
         }
    }
</script>

<style scoped>
*{
    margin: 0px;
    padding:0px;
}
.demo-sturc
{
  width:100%;
  /* border:1px  solid #000;   */
}
.sturc_title
{
  width:100%;
  /* padding:8px; */
  /* border:1px solid red;   */
}
.sturc_hader
{
    width:100%;
    margin-top:35px;
    /* border:1px solid blue; */
    display:flex;
    justify-content: space-around;
}

.sturc_hader .sturc_item1
{
  text-align:center;
  width:30%;
  /* border:1px solid gainsboro; */
  box-shadow: 0px 0px 0px 1px gainsboro;
  border-radius: 4px;
}
.sturc_item1_icon
{
  width:100px;  
}
.sturc_hader .sturc_item2
{
  text-align:center;
  width:30%;
  /* border:1px solid gainsboro; */
   box-shadow: 0px 0px 0px 1px gainsboro;
  border-radius: 4px;
}
.sturc_item2_icon
{
  width:100px;  
}
.sturc_item1:hover
{
background:rgb(202, 118, 180); 
}
.sturc_item2:hover
{
   background:rgb(220, 169, 75);
}
.sturc_title .sturc_title_userinfo{
  width:100%;
  /* border:1px solid  blue; */
  background: rgb(1, 126, 251);
  display:flex;
  
  /* justify-content: space-around; */
}
.sturc_title .sturc_title_userinfo .sturc_loog{
    margin-left:70px;
    margin-top:10px;
    margin-bottom:10px;
}
.sturc_title .sturc_title_userinfo .sturc_icon_title
{
  margin-left:40px;
  font-size:20px;
  color:gainsboro;  
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  line-height:33px;
   margin-top:10px;
  margin-bottom:10px;
}
</style>